<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-05-15 11:11:28
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-10-10 18:00:46
 * @Description: 迁移自 调度平台cnap-V2.1：cnap-mgmt-fe\src\views\hybrid-cloud\index
 *
-->

<template>
  <MyContainer class="app-service-index-container">
    <!-- 搜索框-->
    <MyHeader class="header">
      <span class="name">集群服务器</span>
      <el-select
        v-model="category"
        placeholder="请选择集群服务器"
        size="medium"
        style="width: 180px; margin-left: 10px; margin-right: 20px"
      >
        <el-option
          v-for="item in cloudVendors"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span class="name">集群名称</span>
      <el-input
        v-model="applicationName"
        style="width: 170px; margin-left: 10px; margin-right: 20px"
        size="medium"
        class="input"
        placeholder="请输入集群名称"
        clearable
        @clear="clearNameClick"
        @keyup.enter.native="queryClick"
      />
      <el-button
        size="medium"
        type="primary"
        @click="queryClick"
      >查询</el-button>
      <el-button size="medium" @click="resetClick">重置</el-button>
      <el-button
        size="medium"
        style="margin-left: auto"
        type="primary"
        icon="el-icon-circle-plus icon"
        @click="uploadClick"
      >注册集群</el-button>
      <el-button
        size="medium"
        type="primary"
        icon="el-icon-plus icon"
        @click="createClick"
      >创建集群</el-button>
    </MyHeader>
    <div class="view-type">
      <img
        class="icon"
        alt=""
        :src="viewType === 'grid' ? iconViewGrid : iconViewList"
      />
      <div class="wrapper">
        <div @click="changeViewType('grid')"></div>
        <div @click="changeViewType('list')"></div>
      </div>
    </div>
    <MyMain :class="['main', viewType === 'grid' ? 'special' : '']">
      <!-- 集群照片墙-->
      <template v-if="viewType === 'grid'">
        <div v-if="list.length > 0" class="grid">
          <div class="upload-item" @click="uploadClick">
            <i class="el-icon-circle-plus icon"></i>
            <span>注册集群</span>
          </div>
          <div
            v-for="(item, index) in list"
            :key="index"
            :class="['grid-item']"
          >
            <div class="top">
              <div class="name">{{ item.name }}</div>
              <img
                class="img edit"
                src="@/assets/imgs/hybrid-cloud/icon_edit.png"
                alt=""
                @click="appEditClick(item)"
              />
              <el-popover
                :ref="`popover-delete-grid-${index}`"
                placement="top"
                width="300"
              >
                <p>是否确认删除该集群？</p>
                <div style="text-align: right; margin: 0">
                  <el-button
                    size="mini"
                    type="text"
                    @click="$refs[`popover-delete-grid-${index}`][0].doClose()"
                  >取消</el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="appDeleteClick(item, index)"
                  >确定</el-button>
                </div>
                <img
                  slot="reference"
                  class="img"
                  alt=""
                  src="@/assets/imgs/hybrid-cloud/icon_delete.png"
                />
              </el-popover>
            </div>
            <div class="center">
              <div
                class="item"
                style="
                  position: relative;
                  bottom: 30px;
                  right: 10px;
                  cursor: pointer;
                "
                @click="
                  linkToConsole(
                    item.cloudVendor,
                    item.accountName,
                    item.k8sClusterName
                  )
                "
              >
                <div style="position: relative; right: 20px; top: 5px">
                  <img
                    style="height: 35px"
                    alt=""
                    :src="getAppImg(item.status)"
                  />
                </div>
                <div>
                  <img
                    class="icon"
                    alt=""
                    :src="getCloudVendorImg(item.cloudVendor)"
                  />
                </div>
                <div class="clusterName" :title="item.k8sClusterName">
                  {{ item.k8sClusterName }}
                </div>
              </div>
              <div class="line"></div>
              <div class="item">
                <div class="content">
                  {{ getCloudVendorChn(item.cloudVendor) }}
                </div>
                <div class="ititle">集群服务商</div>
              </div>
              <div class="item">
                <div class="content">{{ item.status }}</div>
                <div class="ititle">状态</div>
              </div>
              <div class="item">
                <div class="content" :title="item.regionId">
                  {{ item.regionId }}
                </div>
                <div class="ititle">所属区域</div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <!-- 集群表格-->
      <template v-if="viewType === 'list'">
        <el-table
          v-loading="loading"
          :data="list"
          stripe
          header-cell-class-name="listHeaderCell"
          :header-cell-style="{ color: '#696969' }"
        >
          <el-table-column prop="cloudVendor" label="集群服务商">
            <template slot-scope="scope">{{
              getCloudVendorChn(scope.row.cloudVendor)
            }}</template>
          </el-table-column>
          <el-table-column prop="k8sClusterName" label="集群名称">
            <template slot-scope="scope">
              <div
                style="cursor: pointer; color: #0091ffb3"
                @click="
                  linkToConsole(
                    scope.row.cloudVendor,
                    scope.row.accountName,
                    scope.row.k8sClusterName
                  )
                "
              >
                {{ scope.row.k8sClusterName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="regionId" label="所属区域" />
          <el-table-column prop="VPCID" label="VPCID" />
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <img
                v-if="scope.row.status === '运行中'"
                alt=""
                style="height: 22px; position: relative; top: 3px"
                src="@/assets/imgs/hybrid-cloud/tableNormal.png"
              />
              <img
                v-if="scope.row.status === '待接入'"
                alt=""
                style="height: 22px; position: relative; top: 3px"
                src="@/assets/imgs/hybrid-cloud/tablePadding.png"
              />
              <img
                v-if="scope.row.status === '停止服务'"
                alt=""
                style="height: 22px; position: relative; top: 3px"
                src="@/assets/imgs/hybrid-cloud/tableStop.png"
              />
            </template>
          </el-table-column>
          <el-table-column prop="createTimeStr" label="注册时间" />
          <el-table-column label="操作" width="140">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                style="height: 22px; line-height: 22px; padding: 0 10px"
                @click="appEditClick(scope.row)"
              >编辑</el-button>
              <el-popover
                :ref="`popover-delete-${scope.$index}`"
                placement="top"
                width="300"
                style="margin-left: 10px"
              >
                <p>是否确认删除该集群？</p>
                <div style="text-align: right; margin: 0">
                  <el-button
                    size="mini"
                    type="text"
                    @click="
                      scope._self.$refs[
                        `popover-delete-${scope.$index}`
                      ].doClose()
                    "
                  >取消</el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="appDeleteClick(scope.row, scope.$index)"
                  >确定</el-button>
                </div>
                <el-button
                  slot="reference"
                  type="danger"
                  style="height: 22px; line-height: 22px; padding: 0 10px"
                  size="mini"
                >删除</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-row type="flex" justify="end" style="margin-top: 30px">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :page-sizes="viewType === 'list' ? sizesList : sizesGrid"
          :page-size="pageSize"
          :current-page.sync="pageNum"
          :total="totalSize"
          @current-change="changePage"
          @size-change="sizeChange"
        />
      </el-row>
    </MyMain>
    <!-- 注册集群组件-->
    <UploadAppDialog
      v-if="showUploadDialog"
      :show.sync="showUploadDialog"
      :is-edit="isEditDialog"
      :app-info="currentEditAppInfo"
      @edit-success="editSuccessCallback"
    />

    <!-- 创建集群 -->
    <CreateDialog
      v-if="showCreateDialog"
      :show.sync="showCreateDialog"
      @success="createSuccessCallback"
    />
  </MyContainer>
</template>

<script>
import MyContainer from '@/components/Layout/MyContainer.vue'
import MyHeader from '@/components/Layout/MyHeader.vue'
import MyMain from '@/components/Layout/MyMain.vue'
import UploadAppDialog from './components/UploadAppDialog.vue'
import CreateDialog from './components/CreateDialog.vue'
import {
  getK8sClusterInfos,
  deleteK8sClusterInfo
} from '@/api/cnap/hybrid-cloud'
import cloudVendorHandle from '@/views/mixin/cloudVendorHandle.js'

export default {
  name: 'HybridCloudIndex',
  components: {
    MyContainer,
    MyHeader,
    MyMain,
    UploadAppDialog,
    CreateDialog
  },
  mixins: [cloudVendorHandle],
  data() {
    return {
      sizesList: [10, 15, 20], // 表格每页数据
      sizesGrid: [11, 15, 19], // 照片墙每页数据
      applicationName: '', // 集群名称
      category: '', // 服务商
      loading: false, // 加载状态
      pageSize: 10, // 每页最大
      pageNum: 1, // 当前页
      totalSize: 0, // 总数
      list: [], // 表格数据
      viewType: 'grid', // 页面展示格式
      iconViewGrid: require('@/assets/imgs/app-service/icon_view_grid.png'), // 图片切换
      iconViewList: require('@/assets/imgs/app-service/icon_view_list.png'), // 图片切换
      showUploadDialog: false, // 注册
      isEditDialog: false, // 编辑
      currentEditAppInfo: {},
      showCreateDialog: false
    }
  },
  computed: {
    /**
     * @description: 云商参数
     * @return {*}
     */
    cloudVendorValue() {
      return this.category
    }
  },
  created() {
    this.pageSize =
      this.viewType === 'list' ? this.sizesList[0] : this.sizesGrid[0] // 确定页面展现格式
    this.initPageData()
  },
  methods: {
    /**
     * @description: 创建成功回调
     * @return {*}
     */
    createSuccessCallback() {
      this.$message.success({
        message: '创建成功',
        duration: 2000
      })
      this.queryClick()
    },
    /**
     * @description: 创建集群
     * @return {*}
     */
    createClick() {
      this.showCreateDialog = true
    },
    /**
     * @description: 点击跳转
     * @description: 集群控制台
     * @return {*}
     */
    linkToConsole(cloudVendor, accountName, k8sClusterName) {
      this.$router.push({
        path: '/hybrid-cloud/cluster',
        query: {
          cloudVendor: cloudVendor,
          accountName: accountName,
          k8sClusterName: k8sClusterName
        }
      })
    },
    /**
     * @description: 点击跳转
     * @description: 集群控制台
     * @return {*}
     */
    uploadClick() {
      this.currentEditAppInfo = {}
      this.isEditDialog = false
      this.showUploadDialog = true
    },
    /**
     * @description: 注册集群组件
     * @description: 成功回调
     * @return {*}
     */
    editSuccessCallback() {
      this.$message.success({
        message: '操作成功',
        duration: 2000
      })
      this.getAppList()
    },
    /**
     * @description: 编辑按钮
     * @description: 调用注册组件
     * @return {*}
     */
    appEditClick(item) {
      this.currentEditAppInfo = item
      this.isEditDialog = true
      this.showUploadDialog = true
    },
    /**
     * @description: 删除按钮
     * @description: 绑定对应数据
     * @return {*}
     */
    appDeleteClick(item, index) {
      if (item.status === '停止服务') {
        this.$confirm(
          '当前集群停止服务，请登录应用服务平台进行相关操作！',
          '提示',
          {
            confirmButtonText: '确定',
            type: 'warning'
          }
        ).then(() => {
          this.$message({
            type: 'info',
            message: '删除已取消!'
          })
        })
        return
      }
      const params = {
        cloudVendor: item.cloudVendor,
        k8sClusterIp: item.k8sClusterIp
      }
      deleteK8sClusterInfo(params).then((res) => {
        if (this.viewType === 'grid') {
          this.$refs[`popover-delete-grid-${index}`][0].doClose() // 照片墙形式
        } else {
          this.$refs[`popover-delete-${index}`].doClose() // 表格形式
        }
        if (res.code === 200) {
          // res.code === 200正常
          this.$Message.success('删除成功')
          this.initPageData()
        } else {
          // 数据查询失败
          // 输出报错信息
          this.$Message.error(res.msg)
        }
      })
    },
    /**
     * @description: 运行状态图片加载
     * @description: 对应不同样式
     * @return {*}
     */
    getAppImg(category) {
      if (category === '运行中') {
        return require('@/assets/imgs/hybrid-cloud/photoNormal.png') // 运行中
      }
      if (category === '待接入') {
        return require('@/assets/imgs/hybrid-cloud/photoPadding.png') // 待接入
      }
      if (category === '停止服务') {
        return require('@/assets/imgs/hybrid-cloud/photoStop.png') // 停止服务
      }
    },
    /**
     * @description: 改变展示格式
     * @description: 对应不同图片
     * @return {*}
     */
    changeViewType(viewType) {
      if (viewType === this.viewType) {
        return
      }
      this.viewType = viewType
      this.pageSize =
        this.viewType === 'list' ? this.sizesList[0] : this.sizesGrid[0]
      this.pageNum = 1
      this.getAppList()
    },
    /**
     * @description: 改变每页数量
     * @description: 照片墙、表格
     * @return {*}
     */
    sizeChange(size) {
      this.pageSize = size
      this.pageNum = 1
      this.getAppList()
    },
    /**
     * @description: 改变当前页
     * @description: 照片墙、表格
     * @return {*}
     */
    changePage(pageNum) {
      this.pageNum = pageNum
      this.getAppList()
    },
    /**
     * @description: 清楚集群名称
     * @return {*}
     */
    clearNameClick() {
      this.applicationName = ''
      this.pageNum = 1
      this.getAppList()
    },
    /**
     * @description: 搜索框重置
     * @return {*}
     */
    resetClick() {
      this.applicationName = ''
      this.category = ''
      this.pageNum = 1
      this.getAppList()
    },
    /**
     * @description: 快速搜索
     * @return {*}
     */
    queryClick() {
      this.pageNum = 1
      this.getAppList()
    },
    /**
     * @description: 获取数据
     * @description: 表格数据
     * @return {*}
     */
    getAppList() {
      this.list = []
      getK8sClusterInfos({
        ...this.cloudVendorParams,
        k8sClusterName: this.applicationName,
        pageNo: this.pageNum,
        pageSize: this.pageSize
      })
        .then((res) => {
          if (res.data) {
            this.totalSize = res.data.totalNum
            const result = res.data.result
            if (result === null) {
              this.totalSize = 0
              this.list = []
            }
            this.list = Array.isArray(result) ? result : []
          } else {
            this.totalSize = 0 // 总数
            this.list = []
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * @description: 页面初始化
     * @description: 获取表格数据
     * @return {*}
     */
    initPageData() {
      this.loading = true
      this.pageNum = 1
      this.getAppList()
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.app-service-index-container {
  .header {
    padding: 0px 25px;

    .name {
      .textStyle(14px , 400, #4a4a4a);
      line-height: 20px;
    }
  }
  .view-type {
    margin-left: auto;
    width: 60px;
    height: 33px;
    position: relative;

    .icon {
      width: 100%;
      height: 100%;
    }
    .wrapper {
      z-index: 1;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      div {
        flex: 1;
        height: 100%;
        cursor: pointer;
      }
    }
  }
  .main {
    margin-top: 20px;
    padding: 0 0 20px 0;

    &.special {
      background: transparent;
      box-shadow: none;
      border-radius: 0;
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: auto;
      grid-column-gap: 20px;
      grid-row-gap: 20px;

      .upload-item {
        cursor: pointer;
        box-sizing: border-box;
        height: 145px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px dashed #979797;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .icon {
          color: #0091ff;
          font-size: 20px;
        }

        span {
          .textStyle(14px, 400, #696969);
          line-height: 20px;
          padding-top: 3px;
        }
      }

      .grid-item {
        box-sizing: border-box;
        height: 145px;
        background: #ffffff;
        box-shadow: 0px 0px 5px 0px rgba(217, 213, 234, 0.5);
        border-radius: 4px;
        padding: 15px 22px 0 25px;

        .top {
          display: flex;
          align-items: center;

          .name {
            .textStyle(14px, 500, #4a4a4a);
            line-height: 20px;
          }

          .img {
            width: 13px;
            cursor: pointer;

            &.edit {
              margin-left: auto;
              margin-right: 10px;
            }
          }

          /deep/ .el-popover__reference-wrapper {
            display: flex;
            align-items: center;
          }
        }

        .center {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .clusterName {
            margin-top: 3px;
            position: relative;
            bottom: 10px;
            font-weight: 600;
            display: inline-block;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-align: center;
            text-overflow: ellipsis;
          }
          .icon {
            width: 68px;
            height: 68px;
          }

          .line {
            width: 1px;
            height: 72px;
            background: #f2f2f2;
          }

          .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 80px;
            .content {
              .textStyle(14px , 500, #4a4a4a);
              line-height: 20px;
              margin-bottom: 10px;
              display: inline-block;
              white-space: nowrap;
              text-align: center;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .ititle {
              .textStyle(12px , 400, #C3C3C3);
              line-height: 17px;
            }
          }
        }
      }
    }

    .el-table::before {
      background-color: #f2f2f2;
    }
    /deep/ .listHeaderCell {
      height: 60px;
      border: none;
      box-sizing: border-box;
      &:first-child {
        padding-left: 25px;
      }
    }

    /deep/ .el-table__body {
      .el-table__row td {
        height: 40px;
        padding: 0;
        border-bottom: none;
        &:first-child {
          padding-left: 25px;
        }
      }
      .el-table__row {
        background: #f8f8f8;
      }
      .el-table__row--striped {
        background: #fff;
        .el-table__cell {
          background: transparent;
        }
      }
    }
    /deep/ .el-table tbody tr:hover > .el-table__cell {
      background: #eaeaea;
    }
  }
}
</style>
